import React, { useEffect, useState } from "react";
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import sendFetch from "@/fetch";
import { useNavigate, Outlet } from "react-router-dom";
import router from "@/router/index";

const { Content, Sider } = Layout;

const items2 = router[1].children?.map((a) => {
  return {
    key: a.path,
    label: a.text,
    icon: a.icon
  };
});

export default function Manager() {
  const [username, setUsername] = useState("");
  const [current, setCurrent] = useState("/");

  const navigate = useNavigate();

  useEffect(() => {
    sendFetch(`/user/info`).then((res) => {
      setUsername(res.name);
    });
  }, []);

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const changeManagerRoute = (e: { key: string }) => {
    navigate(e.key);
  };

  return (
    <Layout style={{ minHeight: "800px" }}>
      <Sider width={200} style={{ background: colorBgContainer }}>
        <div
          style={{
            height: "10vh",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          你好,{username}
        </div>
        <Menu
          mode="inline"
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          style={{ bottom: 0, borderRight: 0 }}
          selectedKeys={[current]}
          items={items2}
          onClick={changeManagerRoute}
        />
      </Sider>
      <Layout style={{ padding: "0 24px" }}>
        <Content
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
            background: '#f5f5f5',
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}
